<template>
	<el-form :model="formData" ref="formRef" :rules="formRules" label-width="12rem">
		<el-row type="flex" :gutter="10">
			<el-col :span="24">
				<el-form-item label="首页轮播图(750*460)" prop="img">
					<el-upload-image v-model="formData.img" :limit="6" :title="title"></el-upload-image>
				</el-form-item>
			</el-col>
			<!-- 课程视频 -->
			<el-col :span="24">
				<el-form-item label="课程视频" prop="video">
					<video v-if="formData.video && formData.video.length" :src="formData.video[0].url" style="width: 200px" controls></video>
					<elUploadFile accept="video/*" @success="setVideo" :file-list="formData.video" notRegType :maxSize="10"> </elUploadFile>
					<p>最大10MB视频</p>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
				<el-form-item label="供应商名称" prop="nickname">
					<el-input v-model="formData.nickname" clearable placeholder="请输入供应商名称"></el-input>
				</el-form-item>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="课程名称" prop="name">
					<el-input v-model="formData.name" clearable placeholder="请输入课程名称"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="课程编号" prop="course_number">
					<!-- :disabled="$store.getters.isAdmin==false || originData?.course_number" -->
					<el-input v-model="formData.course_number" placeholder="请输入课程编号"></el-input>
				</el-form-item>
			</el-col>

			<!-- <el-col :span="12">
				<el-form-item label="课程分类" prop="cate_name">
					<el-input v-model="formData.cate_name" clearable placeholder="请输入课程分类"></el-input>
				</el-form-item>
			</el-col> -->

			<el-col :span="12">
				<el-form-item label="课程分类" prop="cate_id">
					<el-cascader v-model="formData.cate_id" :options="typelist" :props="props" clearable></el-cascader>
					<!-- <el-select v-model="formData.cate_id" size="mini" placeholder="请选择课程类型">
						<el-option v-for="item in typelist" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select> -->
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="教材教具费" prop="price">
					<el-input v-model="formData.price" clearable type="number" placeholder="请输入教材教具费"></el-input>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
				<el-form-item label="积分抵扣价" prop="score_price">
					<el-input v-model="formData.score_price" clearable  type="number" placeholder="请输入积分抵扣价"></el-input>
				</el-form-item>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="课时" prop="class_hour">
					<el-input v-model="formData.class_hour" clearable type="number" placeholder="请输入课时"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="年龄段" prop="age">
					<el-select v-model="formData.age" size="mini" placeholder="请选择年龄段">
						<el-option v-for="item in agelist" :key="item.id" :label="item.start_year + '-' + item.end_year" :value="item.id"> </el-option>
					</el-select>
					<!-- <el-input v-model="formData.age" clearable  type="number" placeholder="请输入年龄段"></el-input> -->
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="是否可使用积分抵扣" prop="is_dk">
					<el-radio-group v-model="formData.is_dk" :disabled="$store.getters.isAdmin == false">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否 </el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="是否是积分商品" prop="is_points_gift">
					<el-radio-group v-model="formData.is_points_gift">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否 </el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<el-col :span="12" v-if="formData.is_points_gift == 1">
				<el-form-item label="赠送积分数量" prop="gift_score">
					<el-input-number v-model="formData.gift_score" :controls="false"></el-input-number>
				</el-form-item>
			</el-col>

			<el-col :span="24">
				<el-form-item prop="content" label="详情">
					<div style="border: 1px solid #ccc; width: 380px">
						<Editor style="width: 375px" height="800px" v-model="formData.content" :mode="mode" @onCreated="onCreated" />
					</div>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="封面图" prop="cover_img">
					<el-upload-image v-model="formData.cover_img" :limit="1" :title="'请上传1:1的图'"></el-upload-image>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row type="flex" justify="center">
			<el-button type="primary" icon="el-icon-check" @click="onConfirm">确认</el-button>
			<el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button>
		</el-row>
	</el-form>
</template>

<script>
import { imghttp, get, post, del } from "@/assets/js/http"
import elUploadFile from "@/components/el-upload-file.vue"
import Editor from "@/components/editor.vue"
export default {
	name: "member-search",
	props: {
		formData: {
			type: Object,
			default: () => null,
		},
	},
	components: {
		"el-upload-image": () => import("@/components/el-upload-image.vue"),
		Editor,
		elUploadFile,
	},
	data() {
		return {
			originData: null,
			props: {
				label: "name",
				value: "id",
				children: "child",
				checkStrictly: true,
			},
			editor: null,
			toolbarConfig: {},
			editorConfig: {
				MENU_CONF: {
					uploadImage: {
						fieldName: "file",
						server: "/admin/ajax/upload",
						headers: {
							batoken: this.$store.state.token,
						},
						/* eslint-disable-next-line */
						customInsert(res, insertFn) {
							insertFn($store.getters.baseUrl + res.data.file.url)
						},
					},
					uploadVideo: {
						fieldName: "file",
						server: "/admin/ajax/upload",
						headers: {
							batoken: this.$store.state.token,
						},
						/* eslint-disable-next-line */
						customInsert(res, insertFn) {
							insertFn($store.getters.baseUrl + res.data.file.url)
						},
					},
				},
			},
			mode: "default",
			formRules: {
				img: [
					{
						required: true,
						message: "请上传",
						trigger: "change",
					},
				],
				cover_img: [
					{
						required: true,
						message: "请上传",
						trigger: "change",
					},
				],
				cate_id: [
					{
						required: true,
						message: "请选择",
						trigger: "change",
					},
				],
				course_number: [{ required: true, message: "请输入", trigger: "change" }],
				name: [{ required: true, message: "请输入", trigger: "change" }],
				cate_name: [{ required: true, message: "请输入", trigger: "change" }],
				price: [{ required: true, message: "请输入", trigger: "change" }],
				// score_price: [{required: true,message: '请输入',trigger: 'change'},],
				class_hour: [{ required: true, message: "请输入", trigger: "change" }],
				age: [{ required: true, message: "请输入", trigger: "change" }],
				content: {
					required: true,
					message: "此项为必填项",
				},
				is_points_discount: [
					{
						required: true,
						message: "此项为必填项",
					},
				],
				is_points_gift: [
					{
						required: true,
						message: "此项为必填项",
					},
				],
				gift_score: [
					{
						required: true,
						message: "此项为必填项",
					},
				],
				is_dk: [
					{
						required: true,
						message: "此项为必填项",
					},
				],
			},
			title: "",
			typelist: [],
			agelist: [],
		}
	},
	watch: {
		formData: {
			handler() {
				this.originData = JSON.parse(JSON.stringify(this.formData))
			},
		},
	},
	beforeDestroy() {
		let editor = this.editor
		if (editor == null) return
		editor.destroy()
	},
	mounted() {
		this.getcateList()
		this.getageList()
	},
	methods: {
		setVideo(e) {
			this.$set(this.formData, "video", e)
		},
		onCreated(editor) {
			this.editor = Object.seal(editor)
		},
		onConfirm() {
			this.$refs.formRef.validate((valid) => {
				if (valid) {
					this.formData.supplier_id = this.$store.state.id
					// alert('submit!');
					console.log(this.formData)
					this.$emit("search", this.formData)
					this.$parent.$emit("update:visible", false)
					this.$refs.formRef.resetFields()

					let editor = this.editor
					if (editor == null) return
					editor.destroy()
					this.editor = null
				} else {
					console.log("error submit!!")
					return false
				}
			})
			//this.formData.content = ""
		},
		onCancel() {
			this.$parent.$emit("update:visible", false)
			this.$refs.formRef.resetFields()
		},
		async getcateList() {
			// this.$loading()
			// let { list,total } =
			await get({
				url: "/admin/project.CourseCategory/index",
				params: {
					limit: 999,
					// ...this.searchParam,
					// ...{
					// 	server_type: this.$route.query.type ? 2 : 1,
					// 	// type:2,//1专业2标签
					// 	// search_time:this.searchParam.search_time.length?this.searchParam.search_time.join(' - '):''
					// }
				},
			}).then((res) => {
				this.typelist = res.list
				// this.searchParam.total = res.total
				// this.importindex = []
				// this.$loading().close()
			})
		},
		async getageList() {
			// this.$loading()
			// let { list,total } =
			await get({
				url: "/admin/project.Course/year",
				params: {
					limit: 9999,
					// ...this.searchParam,
					// ...{
					// 	server_type: this.$route.query.type ? 2 : 1,
					// 	// type:2,//1专业2标签
					// 	// search_time:this.searchParam.search_time.length?this.searchParam.search_time.join(' - '):''
					// }
				},
			}).then((res) => {
				this.agelist = res.list
				// this.searchParam.total = res.total
				// this.importindex = []
				// this.$loading().close()
			})
		},
	},
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
